<template >
    <div class="bigpic">
        <div class="login">
            <p class="title">e店邦O2O平台</p>
            <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" class="demo-ruleForm">
                <el-form-item prop="username">
                    <el-input class="el-input_inner" v-model="ruleForm.username" type="username" autocomplete="off"
                        placeholder="账号">
                        <template #prefix>
                            <el-icon class="el-input__icon" size="20">
                                <User />
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" autocomplete="off" class="el-input_inner" placeholder="密码"
                        v-model="ruleForm.password">
                        <template #prefix>
                            <el-icon class="el-input__icon" size="20">
                                <Lock />
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item class="content">
                    <el-input autocomplete="off" type="code" class="el-input_inners" placeholder="验证码"
                        v-model.number="ruleForm.code">
                        <template #prefix>
                            <el-icon class="el-input__icon" size="20">
                                <Lock />
                            </el-icon>
                        </template>
                    </el-input>
                    <div class="yanzheng">
                        <img class="pics" @click="loginImg" :src="'data:image/gif;base64,' + img">
                    </div>

                </el-form-item>
                <el-form-item>
                    <el-checkbox label="记住密码" size="large" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="el-input_button" @click="loginFn()">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from "vue"
import { FormInstance } from 'element-plus'
import { User, Lock } from "@element-plus/icons-vue"
import { loginApi, loginImgApi } from './api';
import { useRouter } from 'vue-router';

const ruleFormRef = ref<FormInstance>()

const ruleForm = reactive({
    username: 'admin',
    password: 'admin123',
    code: '',
    uuid: ''
})
const rules = reactive({
    code: [{ required: true, message: '请输入验证码', trigger: 'change' }]

})
const img = ref<string>("")
const loginImg = () => {
    loginImgApi().then((res) => {
        if (res.code === 200) {
            img.value = res.img
            ruleForm.uuid = res.uuid
        }
    })
}
loginImg();

const router = useRouter();
const loginFn = () => {
    loginApi(ruleForm).then((res) => {
        console.log(res);
        if (res.code === 200) {
            console.log(res);
            localStorage.setItem("token", res.token);
            // console.log(res.data.token);
            router.push("/");
        }
    })
}

</script>
<style lang="less" scoped>
.bigpic {
    width: 100%;
    height: 100%;
    background-image: url("../../assets/images/loginBg.jpg");
    position: fixed;
    // background-size: 100% 100%;
}

.login {
    border-radius: 6px;
    background: #fff;
    width: 400px;
    margin: 300px auto 0;
    padding: 25px 25px 5px 25px;

    .title {
        font-size: 20px;
        color: #666;
        margin-bottom: 20px;
    }

    .el-input_inner {
        line-height: 40px;
        height: 40px;
    }

    .el-input_inners {
        width: 65%;
        line-height: 40px;
        height: 40px;
    }

    .el-input_button {
        width: 100%;
        height: 40px;
        line-height: 40px;
        font-size: 17px;
    }

    .yanzheng {
        margin-left: 20px;
        width: 120px;
        height: 45px;

        .pics {
            width: 100%;
        }
    }

}
</style>